<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function init() {
  var source = document.getElementById("dragme");
  var dest = document.getElementById("text");
  source.addEventListener("dragstart", function(ev) {
    var dt = ev.dataTransfer;
    dt.setData("text/plain", "Hello");
    return true;
  }, false);
  dest.addEventListener("dragover", function(ev) {
    ev.preventDefault();
    var dt = ev.dataTransfer;
    return false;
  }, false);
  dest.addEventListener("drop", function(ev) {
    var text = ev.dataTransfer.getData("text/plain");
    dest.textContent += text;
    ev.stopPropagation();
    return false;
  }, false);
}
</script>
</head>
<body onload="init()">
<h1>ドラッグ・アンド・ドロップのデモ</h1>
<div id="dragme" draggable="true" style="-webkit-user-drag: element; width: 200px; border: 1px solid gray;">
  ↓にドラッグしてね！（"Hello"が追加されます） 
</div>
<div id="text"
  style="width: 200px; height: 200px; border: 1px solid gray;"></div>
</body>
</html>
